<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>手机相册访问</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 20px;
        }
        .btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 25px;
            font-size: 16px;
            margin: 10px;
            cursor: pointer;
            width: 100%;
            max-width: 300px;
        }
        .btn:disabled {
            background: #ccc;
        }
        .preview {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            margin: 20px 0;
        }
        .preview img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 10px;
        }
        .status {
            background: white;
            padding: 15px;
            border-radius: 10px;
            margin: 10px 0;
        }
        .success { border-left: 4px solid #28a745; }
        .error { border-left: 4px solid #dc3545; }
    </style>
</head>
<body>
    <div class="header">
        <h1>📱 手机相册</h1>
        <p>访问手机相册并上传图片</p>
    </div>

    <div style="text-align: center;">
        <button id="albumBtn" class="btn">📱 访问手机相册</button>
        <button id="cameraBtn" class="btn">📷 拍照</button>
        <button id="uploadBtn" class="btn" disabled>🚀 上传相册</button>
        <button id="refreshBtn" class="btn">🔄 刷新服务器相册</button>
    </div>

    <input type="file" id="fileInput" multiple accept="image/*" style="display: none;">
    <input type="file" id="cameraInput" accept="image/*" capture="environment" style="display: none;">

    <div id="preview" class="preview"></div>
    <div id="status"></div>
    <div id="gallery" class="preview"></div>

    <script>
        const albumBtn = document.getElementById('albumBtn');
        const cameraBtn = document.getElementById('cameraBtn');
        const uploadBtn = document.getElementById('uploadBtn');
        const refreshBtn = document.getElementById('refreshBtn');
        const fileInput = document.getElementById('fileInput');
        const cameraInput = document.getElementById('cameraInput');
        const preview = document.getElementById('preview');
        const status = document.getElementById('status');
        const gallery = document.getElementById('gallery');
        
        let selectedFiles = [];
        
        // 检测设备类型
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        if (isMobile) {
            albumBtn.textContent = '📱 手机相册';
            cameraBtn.textContent = '📷 拍照';
        }
        
        albumBtn.onclick = () => fileInput.click();
        cameraBtn.onclick = () => cameraInput.click();
        
        fileInput.onchange = handleFiles;
        cameraInput.onchange = handleFiles;
        
        function handleFiles(e) {
            const files = Array.from(e.target.files).filter(f => f.type.startsWith('image/'));
            selectedFiles = [...selectedFiles, ...files];
            showPreview();
            uploadBtn.disabled = false;
            e.target.value = '';
        }
        
        function showPreview() {
            preview.innerHTML = '';
            selectedFiles.forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = (e) => {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.onclick = () => removeFile(index);
                    preview.appendChild(img);
                };
                reader.readAsDataURL(file);
            });
        }
        
        function removeFile(index) {
            selectedFiles.splice(index, 1);
            showPreview();
            if (selectedFiles.length === 0) {
                uploadBtn.disabled = true;
            }
        }
        
        uploadBtn.onclick = async () => {
            if (selectedFiles.length === 0) return;
            
            const formData = new FormData();
            selectedFiles.forEach(file => {
                formData.append('files', file);
            });
            
            try {
                uploadBtn.disabled = true;
                uploadBtn.textContent = '上传中...';
                
                const response = await fetch('/api/pic/saveAlbum', {
                    method: 'POST',
                    body: formData
                });
                
                if (response.ok) {
                    const results = await response.json();
                    showStatus('上传成功！', 'success');
                    selectedFiles = [];
                    showPreview();
                    uploadBtn.disabled = true;
                    loadGallery();
                } else {
                    throw new Error(`上传失败: ${response.status}`);
                }
            } catch (error) {
                showStatus(`上传错误: ${error.message}`, 'error');
            } finally {
                uploadBtn.disabled = false;
                uploadBtn.textContent = '🚀 上传相册';
            }
        };
        
        refreshBtn.onclick = loadGallery;
        
        async function loadGallery() {
            try {
                const response = await fetch('/api/pic/list');
                if (response.ok) {
                    const files = await response.json();
                    displayGallery(files);
                }
            } catch (error) {
                showStatus(`获取相册失败: ${error.message}`, 'error');
            }
        }
        
        function displayGallery(files) {
            gallery.innerHTML = '';
            files.forEach(filename => {
                const img = document.createElement('img');
                img.src = `/uploads/${filename}`;
                img.alt = filename;
                gallery.appendChild(img);
            });
        }
        
        function showStatus(message, type) {
            status.innerHTML = `<div class="status ${type}">${message}</div>`;
            setTimeout(() => {
                status.innerHTML = '';
            }, 3000);
        }
        
        // 页面加载时获取相册
        loadGallery();
    </script>
</body>
</html> 